<template>
	<sc-water-mark ref="wm" :text="$TOOL.data.get('SY_TEXT')" :subtext="$TOOL.data.get('SY_SUBTEXT')">
		<!--		{{$TOOL.data.get("USER_INFO")}}-->
		<el-container>
			<el-main>
				<el-row>
					<el-col :span="4">
						<el-input v-model="search.id" placeholder="ID" clearable></el-input>
					</el-col>
					<el-col :span="3">
						<el-button type="primary" icon="el-icon-search" @click="getData"></el-button>
						<el-button type="primary" @click="printInfo">打印</el-button>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="5"></el-col>
					<el-col :span="12" :offset="6">
						<div class="common-layout" ref="dataInfo">
							<el-container>
								<el-header>产融对接情况</el-header>
								<el-main>
									<el-form :model="form" label-width="140px">
										<el-form-item label="融资金额">
											<el-input disabled v-model="form.rzje"/>
										</el-form-item>
										<el-form-item label="融资方式">
											<el-input disabled v-model="form.rzfs"/>
										</el-form-item>
										<el-form-item label="利率">
											<el-input disabled v-model="form.ll"/>
										</el-form-item>
										<el-form-item label="还款方式">
											<el-input disabled v-model="form.hkfs"/>
										</el-form-item>
										<el-form-item label="担保方式">
											<el-input disabled v-model="form.dbfs"/>
										</el-form-item>
										<el-form-item label="审批状态">
											<el-input disabled v-model="form.spzt"/>
										</el-form-item>
										<el-form-item label="放款日期">
											<el-input disabled v-model="form.fkrq"/>
										</el-form-item>
									</el-form>
								</el-main>
							</el-container>
						</div>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</sc-water-mark>
</template>

<script setup>
	/* eslint-disable */
	import {reactive, ref} from 'vue'
	import {crdjqk} from '@/api/model/jkdy'
	import {getCurrentInstance, onMounted} from "@vue/runtime-core"
	import print from '@/utils/print'

	const {proxy} = getCurrentInstance()

	const dataInfo = ref()
	const form = reactive({})
	const search = reactive({
		id: "1",
	})

	const getData = async () => {
		await crdjqk(search).then((res) => {
			let data = res.data
			if (!data) {
				Object.keys(form).forEach((k) => {
					form[k] = '';
				})
				return;
			}
			Object.keys(data).forEach((k) => {
				form[k] = data[k];
			})
		}).catch((err) => {
			console.log(err)
		})
	}
	const printInfo = () => {
		//直接传入REF或者querySelector
		print(dataInfo.value)
	}
	onMounted(() => {
		getData()
	})
</script>

<style lang="scss">
	.common-layout {
		text-align: center;

		.el-header {
			text-align: center;
			display: block;
			font-size: 26px;
		}
	}

	.el-row {
		margin-bottom: 20px;
	}

	.el-row:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
		margin: 0 10px;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.ep-bg-purple {
		background-color: #D3DCE6;
	}

	.ep-bg-purple-light {
		background-color: #E5E9F2;
	}

	.el-main:nth-child(2) {

		background-color: white;
	}

	.el-form-item {
		display: flex;
	}

	.el-form-item__label {
		/*display: inline-block;*/
		/*text-align-last: justify;*/
	}

	.el-form-item__content {
		width: 250px;
		display: inline-block;
	}
</style>
